<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>layout页面布局</title>
	<!-- 引入easyui相关的资源文件 -->
	<link rel="stylesheet" type="text/css"
	 href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/icon.css">
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
	<script type="text/javascript"
	 src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script>
	
</head>

<body class="easyui-layout">

<div data-options="region:'north',title:'管理系统' " style="height :150px">北区</div>



<div data-options="region:'west',title:'系统子菜单'" style="width: 200px">

<!-- 折叠面板 -->
<div class="easyui-accordion" data-options="fit:true">
	<!-- 折叠面板 ,在icoCls下，每一个div都是一个面板-->
	<div data-options="iconCls:'icon-search'" title="面板一">内容一</div>
	<div title="面板二">内容二</div>
	<div title="面板三">内容三</div>
	</div>
</div>

<div data-options="region:'center'">
	<!--  选项卡面板，在easyui0-tabs下面的每一个div都是一个选项卡-->
	<div class="easyui-tabs" data-options="fit:true">
		<div data-options="iconCls:'icon-reload', closable:true" title="选项卡一">选项卡一内容</div>
		
	</div>

</div>



<div data-options="region:'south'" style="height: 50px">南区</div>


</body>
</html>